<template>
  <div class="items">
    <!-- <hr /> -->
    <!-- {{ datalist }} -->
    <!-- {{ todoLists }} -->
    <!-- <h2>
      {{ mainTitle }} <span>{{ datalist.length }}</span>
    </h2> -->
    <div v-if="datalist.length !== 0">
      <div v-for="item in datalist" :key="item.id" class="titem">
        <van-checkbox v-model="item.completed" @click="changeTodo(item)" checked-color="#028a8e" icon-size="30px">
          <input
            class="ipt"
            @focus="editorTodo(item)"
            @keyup.esc="cancelEditor(item)"
            type="text"
            v-model="item.title"
          />

          <a href="javascript:void(0)" @click="delTodo(item)" class="btnDel"
            ><van-icon name="delete-o" size="25" /></a
          >
        </van-checkbox>
      </div>
    </div>

    <div v-else class="titem">
      <img src="../../../assets/暂无记录.png" alt="" style="vertical-align: middle;">
      <h3 style="text-align: center;">None</h3>
      </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import toDoFunc from "../operation";
import getData from "../data";
import request from "../../../../../vue3_todolist/src/utils/request";
const { todoLists } = getData();
const props = defineProps({
  mainTitle: {
    type: String,
    default: () => "待办事项",
  },
  datalist: {
    type: Array,
    default: () => [],
  },
  todoLists: {
    type: Array,
    default: () => [],
  },
});
// console.log(props);
const { editorTodo, cancelEditor, delTodo, updateItem } = toDoFunc(
  props.todoLists,
  ""
);
function changeTodo(item){
  console.log(item)
}
</script>
<style scoped>
.items {
  text-align: center;
  padding: 10px 50px;
  /* margin: auto; */
}
.titem {
  width: 600px;

  text-align: center;
  margin:10px auto;
  /* margin-left: 100px; */
}
.ipt {
  width: 300px;
  border: 0;
  outline: none;
  height: 30px;
  border-radius: 4px;
  border: 2px solid #999;
  margin-right: 10px;
}

</style>
